<section id="bulleted-lists">
    <h2 class="page-header">Bulleted Lists</h2>
    <div class="row">
        <div class="span12">
        </div>
        <div class="span3">
            <ul class="icons-ul">
                <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
                <li><i class="icon-li icon-ok"></i>Buttons</li>
                <li><i class="icon-li icon-ok"></i>Button groups</li>
                <li><i class="icon-li icon-ok"></i>Navigation</li>
                <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
                <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
            </ul>
        </div>
        <div class="span9">
            <p>Easily replace individual bullets.</p>
            {% highlight html %}
            <ul class="icons-ul">
                <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li>
                <li><i class="icon-li icon-ok"></i>Buttons</li>
                <li><i class="icon-li icon-ok"></i>Button groups</li>
                <li><i class="icon-li icon-ok"></i>Navigation</li>
                <li><i class="icon-li icon-ok"></i>Prepended form inputs</li>
                <li><i class="icon-li icon-ok"></i>&hellip;and many more with custom CSS</li>
            </ul>
            {% endhighlight %}

            <div class="alert alert-info"><i class="icon-info-sign"></i>Make sure to NOT include any whitespace after the icon declaration.</div>
        </div>
    </div>
</section>